function pieMenu(elementId){
// todo: animacja powinna nastapic tylko raz dziennie dla uzytkowanika - cookie
// todo: po zmianie wielkosci strony powinno sie przerysowac uwzgledniajac nowa wiekosc okna
// todo: zoptymalizowac algorytm ustawiania kata
// bug fixed: przy pocz. animacji jak sie muszka najedzie to sie rozjezdzaja
// todo: polskie nazwy tygodnia
// dynamiczne rysowanie ramki
    if(typeof(Raphael) == 'undefined')
        return false;

    window.onresize = draw;
    
    var canvas;
    
    
    
    const animationType = "elastic";
    const animationTime = 700;
    const animationScaleFactor = 1.1;
    const borderRadius = 40;
    const strokeWidth = 4;
    
    var weekday=new Array(7);
    weekday[0]="Sunday";
    weekday[1]="Monday";
    weekday[2]="Tuesday";
    weekday[3]="Wednesday";
    weekday[4]="Thursday";
    weekday[5]="Friday";
    weekday[6]="Saturday";
    
    draw();
    
    function draw(){
        var isResize = 0;
        if(canvas)
        {
            isResize = 1;
            canvas.clear();
        }
            
        var dim = getSize();
        const verticalMargin = 0.1;
        const horizontalMargin = 0.15;
        var width = (1-2*horizontalMargin)*dim.width;
        var height = (1-2*verticalMargin)*dim.height;
        canvas = Raphael(elementId, width, height);
        var pie = canvas.set();
        var borderGroup = canvas.set();
        var shorterEdge = Math.min(width, height);
        $("#"+elementId).css({"width": width, "height": height, "margin-left": -width/2,  "margin-top": -height/2 });
                
        var r = shorterEdge/85;
        var R = shorterEdge/3;
     
        var dateSize = 2*r;
        var datePoint = {x: 4/5*width, y: dateSize/2};
        var date = new Date();
        var dateText = canvas.text(datePoint.x, datePoint.y,weekday[date.getDay()]+" "+date.toLocaleDateString());
        dateText.attr({"font-size": dateSize});
        borderGroup.push(dateText);
        //alert(dateText.getBBox().width);
        //var border = canvas.rect(1,1,width-2, height-2, borderRadius, borderRadius);
        bs = Array(10);
        bs[0] = "M " + (datePoint.x+dateText.getBBox().width/2+dateSize) + "," + datePoint.y;
        bs[1] = bs[0] + " H " + (width-borderRadius - 1);
        bs[2] = bs[1] + " a " + borderRadius + "," + borderRadius + " 0 0,1 " + borderRadius + "," + borderRadius;
        bs[3] = bs[2] + " v " + (height - datePoint.y - 2 * borderRadius - 1);
        bs[4] = bs[3] + " a " + borderRadius + "," + borderRadius + " 0 0,1 " + (-borderRadius) + "," + borderRadius;
        bs[5] = bs[4] + " h " + (2*borderRadius-width + 2);
        bs[6] = bs[5] + " a " + borderRadius + "," + borderRadius + " 0 0,1 " + (-borderRadius) + "," + (-borderRadius);
        bs[7] = bs[6] + " v " + (-height + datePoint.y + 2 * borderRadius);
        bs[8] = bs[7] + " a " + borderRadius + "," + borderRadius + " 0 0,1 " + borderRadius + "," + (-borderRadius);
        bs[9] = bs[8] + " H " + (datePoint.x-dateText.getBBox().width/2-dateSize);
        var border = canvas.path(bs.join(" "));
        borderGroup.push(border);
        //borderGroup.attr({opacity: 0});
        
        //var border = canvas.path(bs[0]);
                                
        //border.attr({"stroke-width": 1});                                
        //var borderPoints = new Array(10);
        //var borderRadius = Math.min(width, height)/17;
        //border[0] = 
        //border.animate({
        //                    //"5%"  :{easing: ">","path": bs[1]},
        //                    "15%" :{easing: ">","path": bs[2]},
        //                    //"30%" :{easing: ">","path": bs[3]},
        //                    "40%" :{easing: ">","path": bs[4]},
        //                    //"55%" :{easing: ">","path": bs[5]},
        //                    "65%" :{easing: ">","path": bs[6]},
        //                    //"80%" :{easing: ">","path": bs[7]},
        //                    "90%" :{easing: ">","path": bs[8]},
        //                    "100%":{easing: ">","path": bs[9]}}, 1500); //return;
        //                    "50%":{easing: ">","path": "M  1,5 L "+(width-42)+", 5 A 40,40  0 0,1 "+(width-2)+", 21 L"+(width-2)+","+(height-2)}, 
        //                    "75%":{easing: ">","path": "M  1,5 L "+(width-42)+", 5 A 40,40  0 0,1 "+(width-2)+", 21 L"+(width-2)+","+(height-2)+" L 1,"+(height-2)}, 
        //                    "100%":{easing: ">","path": "M 1,5 L "+(width-42)+", 5 A 40,40 0 0,1 "+(width-2)+", 21 L"+(width-2)+","+(height-2)+" L 1,"+(height-2)+"Z"}
        //                    }, 1000);
       //     function (){
       //         rightborder.animate({"path": "M "+(width-2)+", 1 L "+(width-2)+","+(height-2)}, 1000, 
       //             function (){
       //                 bottomborder.animate({"path": "M "+(width-2)+", "+(height-2)+" L 1,"+(height-2)}, 1000);
       //             });
       //         });
       // 
        //setTimeout(fun,500);

        var k = 0.1; //modyfikator kąta
        var sr = {x: width/2,y: height/2}; //środek płótna
        var mp, md, mt; //punkty na małym kole zgodznie z kier. ruchu waskazówek zegara
        var p1, p2; //punkty wycinka zajmującego pierwszą ćwiartkę
        var d1, d2; //punkty wycinka zajmującego drugą ćwiartkę
        var t1, t2; //punkty wycinka zajmującego trzecią ćwiartkę
        var p, d, t; // obiekt path pierwszego, drugiego i trzeciego wycinka
        
        mt = {x: sr.x, y: sr.y + r};
        tmp = getPoint(r, 30);
        mp = {x: sr.x + tmp.x, y: sr.y - tmp.y};
        
        //ustawianie kąta
        var angle = 180; 
        for(k = 0.1; k < 40; k+=0.1)
        {
            tmp = getPoint(r, 30);
            md = {x: sr.x - tmp.x, y: sr.y - tmp.y};
        
            tmp = getPoint(R, 90+k);
            d1 = {x: sr.x - tmp.x, y: sr.y + tmp.y};
            
            var a = Raphael.angle(md.x, md.y, d1.x, d1.y);
            if( a > 90)
                angle = a;
            else
                break;
        } 
        tmp = getPoint(R, -30+k);
        p1 = {x: sr.x + tmp.x, y: sr.y - tmp.y};   
        tmp = getPoint(R,90-k);
        p2 = {x: sr.x + tmp.x, y: sr.y - tmp.y};
        tmp = getPoint(R, -150+k);
        t1 = {x: sr.x - tmp.x, y: sr.y + tmp.y};
        tmp = getPoint(R,-30-k);
        t2 = {x: sr.x + tmp.x, y: sr.y - tmp.y};
        tmp = getPoint(R,-150-k);
        d2 = {x: sr.x - tmp.x, y: sr.y + tmp.y};
        
        p = getShape(R, mp, p1, p2);    
        d = getShape(R, md, d1, d2);
        t = getShape(R, mt, t1, t2);
        p.attr({"fill": "#215fa8", stroke: "#003675", "stroke-width": strokeWidth});
        d.attr({"fill": "#4ca821", stroke: "#236e00", "stroke-width": strokeWidth});    
        t.attr({"fill": "#cc382d", stroke: "#98231c", "stroke-width": strokeWidth});
        
        pie.push(p);
        pie.push(d);
        pie.push(t);
        
        dtext = canvas.text(md.x-R/2.3,md.y-R/4, "C++");
        ptext = canvas.text(mp.x+R/2.3,mp.y-R/4, "Java");
        pshadowtext1 = canvas.text(mp.x+R/2.3+1,mp.y-R/4-1, "Java");
        pshadowtext2 = canvas.text(mp.x+R/2.3+2,mp.y-R/4-2, "Java");
        pshadowtext3 = canvas.text(mp.x+R/2.3+3,mp.y-R/4-3, "Java");
        ptext.toFront();
        ttext = canvas.text(mt.x,mt.y+R/2, "JavaScript");
        dtext.attr({href: "cplusplus"});
        ptext.attr({href: "java"});
        ttext.attr({href: "javascript"});
        
        menuFontSize = 8*r;
        ptext.attr({ "font-size": menuFontSize, fill: "white"}); 
        pshadowtext1.attr({ "font-size": menuFontSize, fill: "black"});     
        pshadowtext2.attr({ "font-size": menuFontSize, fill: "black"});     
        pshadowtext3.attr({ "font-size": menuFontSize, fill: "black"});     
        dtext.attr({ "font-size": menuFontSize, fill: "white"});
        ttext.attr({ "font-size": menuFontSize, fill: "white"});            
        
        if(!isResize)
        {
            dtext.attr({opacity: 0});
            ptext.attr({opacity: 0});
            ttext.attr({opacity: 0});
            pie.scale(0.01,0.01, sr.x, sr.y);
            pie.animate({scale: "1,1,"+sr.x+"," +sr.y, rotation: 360+","+ sr.x+","+ sr.y}, 1000, ">", addText);
            //setTimeout(function() {borderGroup.animate({opacity: 1}, 500, '<')},0);
        }
        //else
        //{
        //    ptext.attr({opacity: 0, "font-size": 8*r, fill: "white", "font": "tahoma"});  
        //    dtext.attr({opacity: 0, "font-size": 8*r, fill: "white", "font": "tahoma"});
        //    ttext.attr({opacity: 0, "font-size": 8*r, fill: "white", "font": "tahoma"});            
        //
        //}
        
        function addText(){
            //todo mozna wyprobowac tylko wstrzasniecie cwiartka i jednoczesnie elastyczne powiekszenie tekstu
            p.mouseover( function(event){this.animate({scale: animationScaleFactor+","+animationScaleFactor+","+ mp.x+","+ mp.y}, animationTime, animationType);});
            ptext.mouseover( function(event){p.animate({scale: animationScaleFactor+","+animationScaleFactor+","+ mp.x+","+ mp.y}, animationTime, animationType); this.attr({"font-size": 9*r});});
            p.mouseout( function (event) {this.animate({scale: "1.0, 1.0,"+ mp.x+","+ mp.y}, animationTime, animationType);});
            ptext.mouseout( function (event) {p.animate({scale: "1.0, 1.0,"+ mp.x+","+ mp.y}, animationTime, animationType);this.attr({"font-size": 8*r});});
            ptext.click(function (event){p.animate({scale: "1.0, 1.0,"+ mp.x+","+ mp.y}, animationTime, animationType);});
            
            d.mouseover( function(event){this.animate({scale: animationScaleFactor+","+animationScaleFactor+","+ md.x+","+ md.y}, animationTime, animationType)});
            dtext.mouseover( function(event){d.animate({scale: animationScaleFactor+","+animationScaleFactor+","+ md.x+","+ md.y}, animationTime, animationType)});
            d.mouseout( function (event) {this.animate({scale: "1.0, 1.0,"+ md.x+","+ md.y}, animationTime, animationType)});
            dtext.mouseout( function (event) {d.animate({scale: "1.0, 1.0,"+ md.x+","+ md.y}, animationTime, animationType)});
            dtext.click( function (event) {d.animate({scale: "1.0, 1.0,"+ md.x+","+ md.y}, animationTime, animationType)});
            
            t.mouseover( function(event){this.animate({scale: animationScaleFactor+","+animationScaleFactor+","+ mt.x+","+ mt.y}, animationTime, animationType)});
            ttext.mouseover( function(event){t.animate({scale: animationScaleFactor+","+animationScaleFactor+","+ mt.x+","+ mt.y}, animationTime, animationType)});
            t.mouseout( function (event) {this.animate({scale: "1.0, 1.0,"+ mt.x+","+ mt.y}, animationTime, animationType)});
            ttext.mouseout( function (event) {t.animate({scale: "1.0, 1.0,"+ mt.x+","+ mt.y}, animationTime, animationType)});
            ttext.click( function (event) {t.animate({scale: "1.0, 1.0,"+ mt.x+","+ mt.y}, animationTime, animationType)});


            
            dtext.animate({opacity: 1}, 1000, ">");
            ptext.animate({opacity: 1}, 1000, ">");
            ttext.animate({opacity: 1}, 1000, ">");        
        };

        function getPoint(r, angle)
        {
            tangens = Math.tan(Raphael.rad(angle));
            pierwiastek = Math.sqrt(1+tangens*tangens);
            x = r/pierwiastek;
            if(tangens > Math.PI/2 && tangens < 3*Math.PI/4)
                x = -x;
            y = x*tangens;
            return {x: x, y: y};
        };
        
        function getShape(r, begin, mid, end)
        {
            var path = "M" + begin.x + "," + begin.y + " L" + mid.x + "," + mid.y + " A" + r + "," + r + " 0 0,0 " + end.x + "," + end.y + " Z";
            return canvas.path(path);
        };

    }; // edn of draw
};

function getSize() {
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
    }
    return {width: myWidth, height: myHeight};
};